<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>order_2</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
		   body{padding-bottom: 4rem;}
		   dd{margin: 0;}
		   .mui-content-padded{margin-top: 1rem;}
		   .mui-bar-nav {
			    background-color: #71BB98;
			}
			.mui-bar-nav a{color:#fff;}
			.mui-title{color:#fff;font-size:1.2rem;}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.chart_bot{
				background: #fff;
				padding:1rem;
				padding-top:0.5rem;
				padding-bottom:0.5rem;
				width:100%;
			}
			
			.chart_bot h2{
				font-size: 1.1rem;
				font-weight: 500;
				color:#F47D00;
				border-left:5px solid #5b72f4;
				padding-left: 0.5rem;
				line-height: 1.5rem;
			}
			
			.mui-media-body{line-height: 42px;}
			.mui-table-view{background: transparent;}
			.mui-table-view-cell{padding:0;margin:-10px 0;}
			.mui-table-view:before{height: 0;}
			.mui-table-view:after{height: 0;}
			.phot{height: 8rem;}
			.phot img{display: block;margin:0 auto;width: 9rem;}
			.orderto{text-align: center;margin-top: 2rem;}
			.orderto a{width: 15%;}
			.abnormal{height: 2rem;}
			.abnormal span{font-size:1.2rem;}
			.abnormal label{width: 20%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; text-align: right;font-size:1.2rem; margin-top:0.1rem;}
			.abnormal input{width: 60%;border:0;font-size:1.2rem;background: transparent;height: 1.5rem;margin-bottom: 0;}
			.button{padding: 0 1rem;margin-top: 2rem;}
			.button a{width: 13%;}
			.pai{padding-bottom: 1rem;}
			.pai a{font-size:1.2rem;}
			.mui-bar-tab .mui-tab-item {
			    background: #71bb9a;
			    color: #fff;
			}
			.mui-bar-tab .mui-tab-item.mui-active {
			    color: red;
			}
			.active{background: blue;color:#fff!important;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">接单</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="fl chart_bot" style="background: transparent;border:2px dashed rgb(0,153,255);border-radius: 8px;">
					<h2 style="border-left: 0;">转派信息</h2>
					<hr style="margin-bottom: 1rem;" />
					<div class="abnormal">
						<label for="" class="fl">工单编号：</label>
						<input type="text" class="fl" id="order_num" readonly="readonly" value="SDJSL521489" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal">
						<label for="" class="fl">任务编号：</label>
						<input type="text" class="fl" id="work_num" readonly="readonly" value="FRE-ONU-POI-14526" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal">
						<label for="" class="fl">设备名称：</label>
						<input type="text" class="fl" id="name" readonly="readonly" value="电表" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal">
						<label for="" class="fl">前作业人：</label>
						<input type="text" class="fl" id="user" readonly="readonly" value=" 郭小四" />
						<div class="mui-clearfix"></div>
					</div>

				</div>
				<div class="mui-clearfix"></div>
			</div>
			<div class="mui-content-padded">
				<div class="chart_bot">
					<h2>选择转派对象</h2>
					<hr style="margin-bottom: 1rem;" />
					<div class="pai">
						<a class="mui-btn mui-btn-primary mui-btn-outlined">张三</a>
						<a class="mui-btn mui-btn-primary mui-btn-outlined">李四</a>
						<a class="mui-btn mui-btn-primary mui-btn-outlined">王五</a>
					</div>
				</div>
				
			</div>
			<div class="mui-content-padded">
				<div class="fl chart_bot">
					<h2>异常状况</h2>
					<hr style="margin-bottom: 1rem;" />
					<div class="abnormal">
						<label for="" class="fl">异常原因：</label>
						<input type="text" class="fl" readonly="readonly" value="断电" />
						<div class="mui-clearfix"></div>
					</div>
					<div class="abnormal">
						<label for="" class="fl">维修结果：</label>
						<span class="fl" style="margin-top:4px;margin-left: 14px;">检查后未发现断电原由</span>
						<div class="mui-clearfix"></div>
					</div>
					
				</div>
				<div class="mui-clearfix"></div>
			</div>
			<div class="mui-content-padded">
				<div class="fl chart_bot">
					<h2>照片</h2>
					<hr style="margin-bottom: 1rem;" />
					<div class="phot showimg">
						 <img src="../img/u62.png" id="start"/>
					</div>
					
				</div>
				<div class="mui-clearfix"></div>
			</div>
			
			<div class="button">
				<a href="javascript:void(0);" class="fr mui-btn mui-btn-primary" id="send">确认</a>
				<div class="mui-clearfix"></div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item mui-active" style="border-right: 2px solid #fff;" id="home">
	        <span class="mui-icon mui-icon-home"></span>
	        <!--<span class="mui-tab-label">首页</span>-->
	    </a>
	    <a class="mui-tab-item" href="" id="myinfo">
	        <span class="mui-icon mui-icon-person"></span>
	        <!--<span class="mui-tab-label">电话</span>-->
	    </a>
	</nav>
	<script type="text/javascript">
		//
		document.getElementById('myinfo').addEventListener('tap',function(){
			mui.openWindow({
					url:"per_information.html",
					id:"per_information",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····",
						options:{
						}
					}
			})
		});
		//
		document.getElementById('home').addEventListener('tap',function(){
			mui.openWindow({
					url:"../main.html",
					id:"main",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····",
						options:{
						}
					}
			})
		});
	</script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
	</body>
<script>
	(function($, doc) {
		$.init();
		mui.ajax({
            type: "get",
		    url: "../workOrder.json",
		    async: true,
		    dataType: "json",
		    json: "jsoncallback",
		    timeout: 1000,
		    success: function(data) {
		    	   var personal = data.personal;
		    	   $.each(personal,function(i,item){
						var s='<a class="mui-btn mui-btn-primary mui-btn-outlined">'+item.name+'</a>'
						$(".pai").append(s);
					});
		    },
		    error: function(xhr, type, errorThrown) {
		        plus.nativeUI.toast(errorThrown);
		    }
		});
		mui('.pai').on('tap','a',function(){
			if(this.classList.contains('active')){
			  this.classList.remove('active');
			}else{
			  this.classList.add('active');	
			}
			
		});
		$.plusReady(function() {
			var cw = plus.webview.currentWebview();
			var name=cw.name;
			var order_num=cw.order_num;
			var order_area=cw.order_area;
			var order_time=cw.order_time;
			var id=cw.id;
			var order_pic=cw.order_pic;
			var abnormal_name=cw.abnormal_name;
			var createtime=cw.createtime;
			doc.getElementById('order_num').value=order_num;
			doc.getElementById('name').value=name;
			doc.getElementById('abnormal_area').value=order_num;
			doc.getElementById('start').src=order_pic;
			//照相入口
			var nameCon='';
			var send = document.getElementById('send');
			send.addEventListener('tap',function(){
			var namList = document.querySelectorAll('.active');
			    for(var i=0;i<namList.length;i++){
			    	nameCon+=namList[i].innerHTML+',';	
			    }
			    var arr = nameCon.split(',');
			     arr.splice(-1,1)
//				 console.log(arr);
  				 mui.ajax({
		            type: "get",
				    url: "../workOrder.json",
				    async: true,
				    dataType: "json",
				    data:{
				       arr:arr,
				       id:id
				    },
				    json: "jsoncallback",
				    timeout: 1000,
				    success: function(data) {
				    	$.openWindow({
					    		url:"work_order.html",
					    		id:"work_order",
					    		show:{
								autoShow:true,
								aniShow:"slide-in-right",
								duration:100
							},
							waiting:{
								autoShow:true,
								title:"正在加载·····",
								options:{
					//				width:
					//				height:
								}
							}
				    	});
				    },
				    error: function(xhr, type, errorThrown) {
				        plus.nativeUI.toast(errorThrown);
				    }
				});
			});
			//--
			$.oldBack = mui.back;
			var backButtonPress = 0;
			$.back = function(event) {
				backButtonPress++;
				if (backButtonPress > 1) {
					plus.runtime.quit();
				} else {
					plus.nativeUI.toast('再按一次退出应用');
				}
				setTimeout(function() {
					backButtonPress = 0;
				}, 1000);
				return false;
			};
		});
		//
		
		
		
		
	}(mui, document));
</script>
</html>